<template>
  <div class="table-box">
    <ProTable :columns="columns" ref="proRef" :requestApi="getActivities" :pagination="false">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)" v-auth="'新增'">创建优惠活动</el-button>
        <el-button type="danger" @click="deleteApi(scope.selectedListIds)" v-auth="'删除'">批量删除</el-button>
      </template>
      <template #update_time="{ row }">
        {{ dayjs(row.update_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #create_time="{ row }">
        {{ dayjs(row.create_time).format("YYYY-MM-DD HH:mm:ss") }}
      </template>
      <template #opera="{ row }">
        <el-button link :icon="EditPen" type="primary" @click="opera(row)" v-auth="'编辑'">编辑</el-button>
        <el-button link :icon="Delete" type="primary" @click="deleteApi([row.id])" v-auth="'删除'">删除</el-button>
      </template>
    </ProTable>
    <activity-drawer ref="acRef"></activity-drawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import activityDrawer from "../components/commonActivity.vue";
import { EditPen, Delete } from "@element-plus/icons-vue";
import { ref } from "vue";
import { createActivity, editActivity, getActivities, deleteActivity } from "@/api/modules/commonActivity";
import dayjs from "dayjs";
import { useHandleData } from "@/hooks/useHandleData";

const proRef = ref<InstanceType<typeof ProTable> | null>();

const acRef = ref<InstanceType<typeof activityDrawer> | null>();

const columns: ColumnProps[] = [
  { type: "selection", label: "", width: 50 },
  { prop: "title", label: "组件名称" },
  { prop: "cont", label: "组件内容" },
  { prop: "code", label: "活动码" },
  { prop: "opera", label: "操作" }
];

const deleteApi = async (ids: any) => {
  try {
    await useHandleData(deleteActivity, { ids }, "删除所选内容");
    proRef.value?.getTableList();
  } catch (error) {}
};

const opera = (row: any) => {
  const params: any = {
    row,
    api: row ? editActivity : createActivity,
    getTable: proRef.value?.getTableList
  };
  acRef.value?.acceptParams(params);
};
</script>

<style></style>
